<template>
  <div class="sidebar">
    <ul>
      <li
        v-for="(item, index) in sidebarmsg"
        :key="index"
        @click="toggle(item, index)"
      >
        <span :class="{ activeColor: item == init }">
          {{ item }}
          <i v-if="item == init"></i>
        </span>
      </li>
      <span v-show="false"> {{ getkeyword }}</span>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["sidebarmsg"],
  data() {
    return {
      init: "女装",
      cindex: 0,
    };
  },
  methods: {
    toggle(item, index) {
      this.init = item;
      this.$store.state.clickflag = false;

      // 存储当前元素
      this.$store.commit("getKeyWord", item);

      // 存储索引
      this.$store.commit("changeindex", index);
    },
  },
  computed: {
    getkeyword() {
      this.sidebarmsg.forEach((element) => {
        if (element.includes(this.$store.state.keyword)) {
          this.init = element;
        }
      });
      return this.init;
    },
  },

};
</script>

<style lang="less" scoped>
.sidebar {
  background-color: #fff;
  width: 208px;
  border-radius: 0px 30px 30px 0px;
  position: fixed;
  left: 0;
  ul {
    overflow: scroll;
    height: 1200px;
    &::-webkit-scrollbar {
      display: none;
    }
    li {
      font-size: 24px;
      color: #333333;
      padding: 32.5px 0;
      &:first-child {
        padding-top: 24px;
      }
      span {
        position: relative;
        i {
          position: absolute;
          left: -37px;
          top: 2px;
          width: 5px;
          height: 30px;
          background: #cc3333;
          border-radius: 1px;
        }
      }
    }
  }
  .activeColor {
    color: #cc3333;
  }
}
</style>